
    <div class="container-fluid">
        <div class="row body_content">
            <div id='joblist_content' class="panel panel-primary">
                <div class="panel-heading joblist" data-i18n="joblist.Job List"></div>
                <div class="panel-body">
                    <ul class="list-group" id="joblist"></ul>
                    <button class="btn btn-primary joblist" onclick="window.location.replace('newlivejob.html')" data-i18n="joblist.New Live Job"></button>
                    <button class="btn btn-primary joblist" onclick="window.location.replace('newtranscodejob.html')" data-i18n="joblist.New Transcode Job"></button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

    function showLiveJobStatus (response) {
        var li = '<div class="row">';
        li += '<div class="col-md-12">';
        if (response.result == "success") {
            var job = response.data;
            li += '<h3>' + job.name;
            li += ' <a href="/admin/jobmanage.html?name=' + job.name + '"><span class="glyphicon glyphicon-cog"></span></a> ';
            li += ' <a href="/admin/jobstatus.html?name=' + job.name + '"><span class="glyphicon glyphicon-dashboard"></span></a> ';
            li += '</h3>';
            li += '<b><span class="joblist" data-i18n="joblist.Restart times"></span>: </b> ';
            li += '<span id="' + job.name + '_age">' + job.age + '</span>';
            li += ', <b><span class="joblist" data-i18n="joblist.Last time started"></span>: </b> ';
            li += '<span id="' + job.name + '_laststart">' + job.last_start_time + '</span>';
            li += '</br><b><span class="joblist" data-i18n="joblist.Encoder counts"></span>: </b>' + job.encoder_count;
            li += ', <b><span class="joblist" data-i18n="joblist.Average CPU usage"></span>: </b>';
            li += '<span id="' + job.name + '_cpuaverage">' + job.cpu_average + '</span>';
            li += ', <b><span class="joblist" data-i18n="joblist.Memory usage"></span>: </b>';
            li += '<span id="' + job.name + '_memory">' + job.memory + '</span>';
            li += '<button class="btn btn-warning pull-right joblist" id="job_' + job.name + '" onclick="stopJob(\'' + job.name + '\')" data-i18n="joblist.Stop Job">';
            li += '</button>';
            li += '</div>';
            $('#li_' + job.name).html(li);
        } else {
            var job = response;
            li += '<h3>' + job.name;
            li += ' <a href="/admin/jobmanage.html?name=' + job.name + '"><span class="glyphicon glyphicon-cog"></span></a> ';
            li += '</h3>';
            li += ' <span class="joblist" data-i18n="joblist.The job is not started"></span>';
            li += '<button class="btn btn-primary pull-right joblist" id="job_' + job.name + '" onclick="startJob(\'' + job.name + '\')" data-i18n="joblist.Start Job">';
            li += '</button>';
            li += '</div>';
            $('#li_' + job.name).html(li);
        }
        $(".joblist").i18n ();
    }

    function showNonliveJobStatus (response) {
        var li = '<div class="row">';
        li += '<div class="col-md-12">';
        if (response.result == "success") {
            var job = response.data;
            li += '<h3>' + job.name + '</h3>';
            li += ' <b class="joblist" data-i18n="joblist.Current Position / Duration"></b>: <span id="' + job.name + '_timestamp">' + job.source.streams[0].timestamp / 1000000000 + '</span> / ' + job.source.duration / 1000000000;
            li += ', <b class="joblist" data-i18n="joblist.Start Time"></b>: ' + job.last_start_time;
            li += '</br><b class="joblist" data-i18n="joblist.Encoder counts"></b>:' + job.encoder_count;
            li += ' <b class="joblist" data-i18n="joblist.Average CPU usage"></b>:' + job.cpu_average;
            li += ' <b class="joblist" data-i18n="joblist.Memory usage"></b>:' + job.memory;
            li += '<button class="btn btn-warning pull-right joblist" id="job_' + job.name + '" onclick="cancelJob(\'' + job.name + '\')" data-i18n="joblist.Cancel Job">';
            li += '</button>';
            li += '</div>';
            $('#li_' + job.name).html(li);
        }
        $(".joblist").i18n ();
    }

    function startJob (name) {
        $.get ("/admin/getjob/" + name, function (data) {
            if (data.result == "failure") {
                bootbox.alert ($.t ("joblist.Get Job Failure") + ": " + response.reason);
                return;
            }

            var job = JSON.stringify (data.data, null, 4);

            $.post ("/admin/start", job, function (response) {
                if (response.result == "success") {
                    bootbox.alert ($.t ("joblist.Start Job Success") + ": " + name, function () {
                        var jobStatUrl = "/stat/gstreamill/job/" + response.name;
                        $.get(jobStatUrl, function (response) {
                            showLiveJobStatus (response);
                        });
                    });

                } else {
                    bootbox.alert ($.t ("joblist.Start Job Failure") + ": " + response.reason);
                }
            });
        });
    }

    function stopJob (name) {
        $.get ("/admin/stop/" + name, function (response) {
            if (response.result == "success") {
                bootbox.alert ($.t ("joblist.Stop Job Success") + ": " + name, function () {
                    var jobStatUrl = "/stat/gstreamill/job/" + name;
                    $.get(jobStatUrl, function (response) {
                        showLiveJobStatus (response);
                    });
                });

            } else {
                bootbox.alert ($.t ("joblist.Stop Job Failure") + ": " + response.reason);
            }
        });
    }

    function cancelJob (name) {
        bootbox.confirm ($.t ("joblist.Realy cancel the job") + ": " + name, function (confirm) {
            if (!confirm) {
                return;
            }
            $.get ("/admin/stop/" + name, function (response) {
                if (response.result == "success") {
                    bootbox.alert ($.t ("joblist.Cancel Job Success") + ": " + name, function () {
                        location.reload ();
                    });
    
                } else {
                    bootbox.alert ($.t ("joblist.Cancel Job Failure") + ": " + response.reason);
                }
            });
        });
    }

    $(document).ready(function () {
        $.get("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                bootbox.alert ("Get Configure Failure: " + data.reason);
                return;
            }

            $.get("/admin/listlivejob", function (jobs) {
                for (var i = 0; i < jobs.length; i++) {
                    var li = '<li class="list-group-item" id="li_' + jobs[i] + '"></li>';
                    $('#joblist').append(li);
                    var jobStatUrl = '/stat/gstreamill/job/' + jobs[i];
                    $.get(jobStatUrl, function (response) {
                        showLiveJobStatus (response);
                    });
                }
            });

            $.get("/admin/listnonlivejob", function (jobs) {
                for (var i = 0; i < jobs.length; i++) {
                    var li = '<li class="list-group-item" id="li_' + jobs[i] + '"></li>';
                    $('#joblist').append(li);
                    var jobStatUrl = '/stat/gstreamill/job/' + jobs[i];
                    $.get(jobStatUrl, function (response) {
                        showNonliveJobStatus (response);
                    });
                }
            });

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".joblist").i18n ();
            });

            window.setInterval (function () {
                var list = $("li[id^=li_]");
                for (var i = 0, jobstatus; jobstatus = list[i]; i++) {
                    var name = jobstatus.id.substring(3);
                    $.ajax ({
                        type: "get",
                        url: "/stat/gstreamill/job/" + name,
                        dataType: "json",
                        async: false,
                        success: function (response) {
                            if (response.result === "failure") {
                                return;
                            }
                            var status = response.data;
                            // live job?
                            if (status.source.duration === 0) {
                                $("#" + name + "_age").text (status.age);
                                $("#" + name + "_laststart").text (status.last_start_time);
                                $("#" + name + "_cpuaverage").text (status.cpu_average);
                                $("#" + name + "_memory").text (status.memory);
                            } else {
                                $("#" + name + "_timestamp").text (status.source.streams[0].timestamp / 1000000000);
                            }
                        }
                    });
                }
            }, 5000);
        });
    });

    </script>
